<script>
    const urlParams = new URLSearchParams(window.location.search);
    let type = urlParams.get('type');
    if ( type == null ) type = 'single';
</script>

<nav class="pt-3">
    <div class="container mx-auto px-4 flex justify-between items-center">
        <div class="type flex items-center border border-black rounded-full">
            <a href="/audio-synthesis/list?type=single" class="{type=='single' ? 'active' : ''} px-4 py-1 text-gray-600 rounded-full">单音色</a>
            <a href="/audio-synthesis/list?type=multiple" class="{type=='multiple' ? 'active' : ''} px-4 py-1 text-gray-600 rounded-full">多音色</a>
        </div>
        <div class="flex items-center space-x-4">
            <input type="text" placeholder="请输入搜索内容" class="border rounded px-3 py-1">
            <a href="/audio-synthesis/create?type={type}" class="bg-green-500 text-white px-4 py-1 rounded-full">新建</a>
        </div>
    </div>
</nav>

<style>
    .type>a {
        margin: 1px;
    }
    .type>.active {
        color: white;
        background-color: green;
    }
</style>
